<template>
  <layout title="select列选择器">
    <layout-content title="基础使用">
      <options-list icon="menu" @click="singleSelect = true">单列</options-list>
      <options-list icon="menu" @click="multiSelect = true">多列</options-list>
      <options-list icon="menu" @click="autoMultiSelect = true">联动多列</options-list>
    </layout-content>

    <layout-content title="默认选中">
      <options-list icon="menu" @click="defaultSingleSelect = true">带默认值</options-list>
    </layout-content>

    <layout-content title="修改颜色">
      <options-list icon="menu" @click="customColorSelect = true">修改颜色</options-list>
    </layout-content>

    <layout-content title="隐藏取消/确认按钮">
      <options-list icon="menu" @click="hiddenCancelSelect = true">隐藏取消按钮</options-list>
      <options-list icon="menu" @click="hiddenConfirmSelect = true">隐藏确认按钮</options-list>
    </layout-content>
  </layout>

  <tn-select v-model="singleSelect" :data="singleSelectData"></tn-select>
  <tn-select v-model="multiSelect" mode="multi" :data="multiSelectData"></tn-select>
  <tn-select v-model="autoMultiSelect" mode="autoMulti" :data="autoMultiSelectData"></tn-select>

  <tn-select v-model="defaultSingleSelect" :default-value="defaultValueSelect" :data="singleSelectData"></tn-select>

  <tn-select v-model="customColorSelect" cancel-color="tn-color-orange" confirm-color="#01BEFF" :data="singleSelectData"></tn-select>

  <tn-select v-model="hiddenCancelSelect" cancel-text="" :data="singleSelectData"></tn-select>
  <tn-select v-model="hiddenConfirmSelect" confirm-text="" :data="singleSelectData"></tn-select>

  <layout-doc v-model="showDoc" :content="docContent"></layout-doc>
  <doc-fab @click="handleDocFabClick"/>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { docContent } from './lib/doc'
import Layout from '@/components/layout/index.vue'
import LayoutContent from '@/components/layout/content.vue'
import LayoutDoc from '@/components/layout/doc.vue'
import DocFab from '@/components/doc-fab/index.vue'

import OptionsList from '@/components/components-option-list/index.vue'

import TnSelect from '@/tuniao-ui/components/tn-select/src/Select.vue'

// 弹出文档 
let showDoc = ref<boolean>(false)
const handleDocFabClick = () => {
  showDoc.value = true
}

// select数据
type SingleSelectData = { value: number, label: string }
const singleSelectData: SingleSelectData[] = [
  { label: '1班', value: 1 },
  { label: '2班', value: 2 },
  { label: '3班', value: 3 }
]
let singleSelect = ref<boolean>(false)

let defaultValueSelect = [1]
let defaultSingleSelect = ref<boolean>(false)

let customColorSelect = ref<boolean>(false)

let hiddenCancelSelect = ref<boolean>(false)
let hiddenConfirmSelect = ref<boolean>(false)

type MultiSelectData = SingleSelectData[][]
const multiSelectData: MultiSelectData = [
  [
    { label: '一年级', value: 1 },
    { label: '二年级', value: 2 },
    { label: '三年级', value: 3 }
  ],
  [
    { label: '1班', value: 1 },
    { label: '2班', value: 2 },
    { label: '3班', value: 3 }
  ]
]
let multiSelect = ref<boolean>(false)

type AutoMultiSelectData = {
  value: string,
  label: string,
  children?: AutoMultiSelectData[]
}
const autoMultiSelectData: AutoMultiSelectData[] = [
  {
    label: '小学部',
    value: '1',
    children: [
      {
        label: '一年级',
        value: '11',
        children: [
          { label: '1班', value: '111' },
          { label: '2班', value: '112' },
          { label: '3班', value: '113' }
        ]
      },
      {
        label: '二年级',
        value: '12',
        children: [
          { label: '1班', value: '121' },
          { label: '2班', value: '122' }
        ]
      },
      {
        label: '三年级',
        value: '13',
        children: [
          { label: '1班', value: '131' },
          { label: '2班', value: '132' },
          { label: '3班', value: '133' },
          { label: '4班', value: '134' },
        ]
      }
    ]
  },
  {
    label: '初中部',
    value: '2',
    children: [
      {
        label: '初一',
        value: '21',
        children: [
          { label: '1班', value: '211' },
          { label: '2班', value: '212' },
          { label: '3班', value: '213' }
        ]
      },
      {
        label: '初二',
        value: '22',
        children: [
          { label: '1班', value: '221' },
          { label: '2班', value: '222' }
        ]
      },
      {
        label: '初三',
        value: '23',
        children: [
          { label: '1班', value: '231' },
          { label: '2班', value: '232' },
          { label: '3班', value: '233' },
          { label: '4班', value: '234' },
        ]
      }
    ]
  },
  {
    label: '高中部',
    value: '3',
    children: [
      {
        label: '高一',
        value: '31',
        children: [
          { label: '1班', value: '311' },
          { label: '2班', value: '312' },
          { label: '3班', value: '313' }
        ]
      },
      {
        label: '高二',
        value: '32',
        children: [
          { label: '1班', value: '321' },
          { label: '2班', value: '322' }
        ]
      },
      {
        label: '高三',
        value: '33',
        children: [
          { label: '1班', value: '331' },
          { label: '2班', value: '332' },
          { label: '3班', value: '333' },
          { label: '4班', value: '334' },
        ]
      }
    ]
  }
]
let autoMultiSelect = ref<boolean>(false)
</script>

<style lang="scss" scoped>
</style>
